<template>
  <view class="container">
    <FilterNavbar>
      <template #center>
        <view class="navbar-title"> 年检记录 </view>
      </template>
    </FilterNavbar>
    <view class="page-filter">
      <ve-tabs :actived="0" :list="tabs" @change="tabsChange" />
    </view>
    <!-- 列表 -->
    <scroll-view
      scroll-y
      :scroll-top="scrollTop"
      refresher-enabled
      :refresher-triggered="refreshStatus"
      :enable-back-to-top="true"
      @refresherrefresh="resetRefresh(true)"
      @scrolltolower="reachBottom"
    >
      <view class="record-list">
        <OrderItem v-for="record in dataSource" :record="record" :key="record.id" />
        <!-- 加载结束列表为空时展示 -->
        <ve-empty v-if="dataSource.length == 0 && loadStatus == 'nomore'"></ve-empty>
        <!-- 底部加载状态 -->
        <ve-load-more v-else :status="loadStatus" bgColor="#F7F7F9"></ve-load-more>
      </view>
    </scroll-view>
    <ve-bottom-box v-if="showAddBtn">
      <ve-button type="primary" @click="handleAdd" size="long">新增年检</ve-button>
    </ve-bottom-box>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { onLoad, onUnload } from '@dcloudio/uni-app'
  import FilterNavbar from '@/components/FilterNavbar'
  import useList from '@/hooks/useList'
  import OrderItem from './components/orderItem.vue'
  import { usePermission } from '@/hooks/usePermission'
  const handleAdd = () => {
    uni.navigateTo({
      url: '/pages/asset/car-inspect/form?carId=' + queryParam.value.carId,
    })
  }

  const tabs = ['全部', '已付款', '未付款', '已驳回']
  // assetFeeStatus 0未付款 1已付款 5已驳回
  const feeStatusMap = {
    1: 1,
    2: 0,
    3: 5,
  }
  const tabsChange = (e) => {
    dataSource.value = []
    queryParam.value.pageNumber = 1
    // 费用状态
    queryParam.value.feeStatus = feeStatusMap[e]
    loadData(1)
  }

  const queryParam = ref({})
  const { resetRefresh, reachBottom, loadData, scrollTop, loadStatus, refreshStatus, dataSource } = useList(
    '/V5/inspection/getList',
    queryParam,
  )

  const showAddBtn = ref(false)
  onLoad((data) => {
    // 新增按钮控制
    const from = data.from
    const disabledCar = from === 'car-return' || from === 'car-disposal'
    showAddBtn.value = !disabledCar && usePermission('svmsapp:car-manage.detail.inspectRecord.add')
    // 初始化参数
    queryParam.value = {
      carId: data.id,
      feeStatus: undefined, // 全部
      pageNumber: 1,
    }
    loadData()
    uni.$on('carInspect_getList', () => {
      // 重置数据
      dataSource.value = []
      queryParam.value.pageNumber = 1
      // 刷新年检数据
      loadData()
      // 刷新车辆list
      uni.$emit('getList')
      // 刷新车辆详情
      uni.$emit('carDetail_refresh')
    })
  })

  onUnload(() => {
    console.log('🐳 ~ onUnload ~ event: carInspect_getList')
    uni.$off('carInspect_getList')
  })
</script>

<style lang="less" scoped>
  .container {
    height: 100vh;
  }
  .record-list {
    padding: 24rpx;
  }
</style>
